<template>
  <div class="page_space btn_space">
    <p class="title_1">基本信息</p>
    <input-card>
      <inputItem
        :content="params.subjectTypeName"
        title="主体类型"
        tip="请选择主体类型"
        type="select"
        @select="toSelect(0)"
      />

      <template v-if="params.subjectType === 'FixedPlace'">
        <inputItem
          :content="params.name"
          title="主体名称"
          tip="请选择主体名称"
          type="select"
          @select="
            goto(
              '/subject-list?lastPage=new-inspectSubject&subjectType=FixedPlace'
            )
          "
        />
        <inputItem
          v-model="params.uscId"
          :content="params.uscId"
          type="input"
          title="营业执照/统一社会信用代码/身份证"
          tip="请输入营业执照/统一社会信用代码/身份证"
          disabled
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          :content="params.areaName"
          title="所属区划"
          tip="请选择所属区划"
          type="select"
          disabled
          disabledTip="选择主体后自动带出"
          @select="toSelect"
        />
        <inputItem
          :content="params.managementEntName"
          title="所属市场"
          tip="请选择所属市场"
          type="select"
          disabled
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          :content="params.manageStateText"
          title="经营状态"
          tip="请选择经营状态"
          type="select"
          disabled
          disabledTip="选择主体后自动带出"
          @select="toSelect(2)"
        />
        <inputItem
          :content="params.subjectNatureText"
          title="主体性质"
          tip="请选择主体性质"
          type="select"
          disabled
          disabledTip="选择主体后自动带出"
          @select="toSelect(3)"
        />
        <inputItem
          v-model="params.legalPerson"
          :content="params.legalPerson"
          title="负责人姓名"
          tip="请输入负责人姓名"
          type="input"
          disabled
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          v-model="params.contacts"
          :content="params.contacts"
          title="联系人姓名"
          tip="请输入联系人姓名"
          type="input"
          disabled
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          v-model="params.contactsTel"
          :content="params.contactsTel"
          title="联系方式"
          tip="请输入联系方式"
          type="input"
          disabled
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          :content="params.varietyTypeIdsText"
          title="经营范围"
          tip="请选择经营范围"
          type="select"
          disabled
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          v-model="params.home"
          :content="params.home"
          title="住所（选填）"
          tip="请输入住所"
          type="input"
          disabled
          disabledTip="选择主体后自动带出"
        />
      </template>
      <template v-else-if="params.subjectType === 'TemporaryOperatingArea'">
        <inputItem
          :content="typeOfAddSubject"
          title="新增主体方式"
          :options="['选择已建档主体', '临时建档']"
          tip="若已建档主体中未检索出来快检主体，可选择临时建档的方式新增快检主体并进行采样，待市场方审核通过后可继续进行检测"
          type="radio"
          @radio="selectFilingSubject"
        />
        <inputItem
          v-if="typeOfAddSubject === '1'"
          :content="params.name"
          title="主体名称"
          tip="请选择主体名称"
          type="select"
          @select="
            goto(
              '/subject-list?lastPage=new-inspectSubject&subjectType=TemporaryOperatingArea'
            )
          "
        />
        <inputItem
          v-else
          v-model="params.name"
          :content="params.name"
          title="主体名称"
          tip="请输入主体名称"
          type="input"
        />
        <inputItem
          v-model="params.uscId"
          :content="params.uscId"
          type="input"
          title="营业执照/统一社会信用代码/身份证"
          tip="请输入营业执照/统一社会信用代码/身份证"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          :content="params.areaName"
          title="所属区划"
          tip="请选择所属区划"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="toSelect(9)"
        />
        <inputItem
          :content="params.managementEntName"
          title="所属市场"
          tip="请选择所属市场"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="goto('/select-market')"
        />
        <inputItem
          :content="params.manageStateText"
          title="经营状态"
          tip="请选择经营状态"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="toSelect(2)"
        />
        <inputItem
          :content="params.subjectNatureText"
          title="主体性质"
          tip="请选择主体性质"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="toSelect(3)"
        />
        <inputItem
          v-model="params.legalPerson"
          :content="params.legalPerson"
          title="负责人姓名"
          tip="请输入负责人姓名"
          type="input"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          v-model="params.contacts"
          :content="params.contacts"
          title="联系人姓名"
          tip="请输入联系人姓名"
          type="input"
        />
        <inputItem
          v-model="params.contactsTel"
          :content="params.contactsTel"
          title="联系方式"
          tip="请输入联系方式"
          type="input"
        />
        <inputItem
          :content="params.varietyTypeIdsText"
          title="经营范围"
          tip="请选择经营范围"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="toSelect(11)"
        />
        <inputItem
          :content="params.hasEntryRecordText"
          title="是否建立入场销售者档案"
          tip="请选择是否"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="toSelect(12)"
        />
        <inputItem
          :content="params.foundationDate"
          title="销售者入场日期"
          tip="请选择日期"
          type="select"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
          @select="toSelect(10)"
        />
        <inputItem
          v-model="params.home"
          :content="params.home"
          title="住所（选填）"
          tip="请输入住所"
          type="input"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
        />
        <inputItem
          v-model="params.licenseNumber"
          title="食品经营许可证/仅销售预包装食品备案（选填）"
          tip="请输入食品经营许可证/仅销售预包装食品备案"
          type="input"
          :disabled="typeOfAddSubject === '1'"
          disabledTip="选择主体后自动带出"
        />
      </template>
      <template
        v-else-if="params.subjectType === 'OtherSellersOfEdibleAgricultural'"
      >
        <inputItem
          v-model="params.name"
          :content="params.name"
          title="主体名称"
          tip="请输入主体名称"
          type="input"
        />
        <inputItem
          v-model="params.uscId"
          :content="params.uscId"
          type="input"
          title="营业执照/统一社会信用代码/身份证"
          tip="请输入营业执照/统一社会信用代码/身份证"
        />
        <inputItem
          :content="params.areaName"
          title="经营地址"
          tip="请选择所属区划"
          type="select"
          @select="toSelect(9)"
        />
        <inputItem
          v-model="params.address"
          :content="params.address"
          title="经营详细地址"
          tip="请输入经营详细地址"
          type="input"
        />
        <inputItem
          :content="params.manageStateText"
          title="经营状态"
          tip="请选择经营状态"
          type="select"
          @select="toSelect(2)"
        />
        <inputItem
          :content="params.subjectNatureText"
          title="主体性质"
          tip="请选择主体性质"
          type="select"
          @select="toSelect(3)"
        />
        <inputItem
          :content="params.subSubjectTypeText"
          title="经营者类型"
          tip="请选择经营者类型"
          type="select"
          @select="toSelect(1)"
        />
        <inputItem
          v-model="params.legalPerson"
          :content="params.legalPerson"
          title="法定代表人姓名（选填）"
          tip="请输入联系人姓名"
          type="input"
        />
        <inputItem
          v-model="params.contacts"
          :content="params.contacts"
          title="联系人姓名"
          tip="请输入联系人姓名"
          type="input"
        />
        <inputItem
          v-model="params.contactsTel"
          :content="params.contactsTel"
          title="联系方式"
          tip="请输入联系方式"
          type="input"
        />
        <inputItem
          v-model="params.varieties"
          :content="params.varieties"
          title="经营项目"
          tip="请输入经营项目"
          type="input"
        />
        <!-- <inputItem
          v-model="params.description"
          title="备注（选填）"
          tip="请输入备注"
          type="textarea"
        /> -->
        <input-item-textarea
          v-model="params.description"
          title="请输入备注"
          tip="请输入备注"
        />
      </template>
    </input-card>

    <p class="title_1">证件信息</p>
    <input-card>
      <template v-if="params.subjectType === 'FixedPlace'">
        <inputItem
          title="营业执照照片（选填）"
          tip="支持上传.png,.jpg文件,单个文件大小10M,最多上传1张"
          type="upload"
          :maxLen="1"
          @upload="uploadFile($event, 'LicenseOrCode')"
        />
        <inputItem
          title="食品经营许可证照片（选填）"
          tip="支持上传.png,.jpg文件,单个文件大小10M,最多上传1张"
          type="upload"
          :maxLen="1"
          @upload="uploadFile($event, 'BusinessLicense')"
        />
      </template>
      <template v-else-if="params.subjectType === 'TemporaryOperatingArea'">
        <inputItem
          title="身份证照片（选填）"
          tip="支持上传.png,.jpg文件,单个文件大小10M,最多上传1张"
          type="upload"
          :maxLen="1"
          @upload="uploadFile($event, 'IdCard')"
        />
      </template>
      <template
        v-else-if="params.subjectType === 'OtherSellersOfEdibleAgricultural'"
      >
        <inputItem
          title="营业执照照片（选填）"
          tip="支持上传.png,.jpg文件,单个文件大小10M,最多上传1张"
          type="upload"
          :maxLen="1"
          @upload="uploadFile($event, 'LicenseOrCode')"
        />
        <inputItem
          title="食品经营许可证照片（选填）"
          tip="支持上传.png,.jpg文件,单个文件大小10M,最多上传1张"
          type="upload"
          :maxLen="1"
          @upload="uploadFile($event, 'BusinessLicense')"
        />
        <inputItem
          title="备案凭证（选填）"
          tip="支持上传.png,.jpg文件,单个文件大小10M,最多上传1张"
          type="upload"
          :maxLen="1"
          @upload="uploadFile($event, 'KeepRecord')"
        />
      </template>
    </input-card>

    <div class="btn_wrap">
      <button v-debounce class="btn" @click="submit">提交</button>
    </div>

    <van-popup v-model="show" position="bottom" :round="true">
      <!-- 快检类型 -->
      <template v-if="active === 0">
        <van-picker
          ref="picker1"
          title="选择主体类型"
          show-toolbar
          :columns="subjectTypeList"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmSubjectType">确定</button>
        </div>
      </template>
      <!-- 经营者类型 -->
      <template v-if="active === 1">
        <van-picker
          ref="picker2"
          title="选择经营者类型"
          show-toolbar
          :columns="subSubjectTypeList"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmSubSubjectType">确定</button>
        </div>
      </template>
      <!-- 经营状态 -->
      <template v-if="active === 2">
        <van-picker
          ref="picker3"
          title="选择经营状态"
          show-toolbar
          :columns="manageStateList"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmManageState">确定</button>
        </div>
      </template>
      <!-- 主体性质 -->
      <template v-if="active === 3">
        <van-picker
          ref="picker4"
          title="选择主体性质"
          show-toolbar
          :columns="subjectNatureList"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmSubjectNatureList">
            确定
          </button>
        </div>
      </template>
      <!-- 选择产地-->
      <template v-if="active === 9">
        <van-cascader
          v-model="cascaderValue"
          title=""
          :options="places"
          @close="show = false"
          @change="onChange"
          @finish="onFinish"
        />
      </template>
      <!-- 销售者入场日期 -->
      <template v-if="active === 10">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="submitTime">确定</button>
        </div>
      </template>
      <template v-if="active === 11">
        <div class="business_scope">
          <div class="business_scope_top">
            <span class="title">经营范围</span>
            <span class="all_select">全选</span>
          </div>
        </div>
        <van-tree-select
          :items="businessScopeList"
          :active-id.sync="activeIds"
          :main-active-index.sync="activeIndex"
          @click-item="getBusinessScopeText"
        />
        <div class="btn_box">
          <button class="btn default middle" @click="resetBusinessScope">
            重置
          </button>
          <button class="btn middle" @click="confirmBusinessScope">确定</button>
        </div>
      </template>
      <!-- 是否建立入场销售者档案 -->
      <template v-if="active === 12">
        <van-picker
          ref="pickerOfEnterprisePremises"
          title="是否建立入场销售者档案"
          show-toolbar
          :columns="[
            { text: '是', id: 'true' },
            { text: '否', id: 'false' }
          ]"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmEnterprisePremises">
            确定
          </button>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import inputCard from '@/components/input-card/card'
import inputItem from '@/components/input-card/item'
import { saveInspectSubject, getBusinessScope } from '@/api/subject'
import { getAreaList } from '@/api/base'
import { ParseDate, delKeepaliveCache } from '@/utils'
import { store, mutations } from '@/observable'
import { validateIdCardAndUscId, validateContactsTel } from '@/utils/validate'
import inputItemTextarea from '@/components/input-card/item-textarea'

export default {
  name: 'newInspectSubject',
  components: { inputCard, inputItem, inputItemTextarea },
  data() {
    return {
      show: false,
      active: 0,
      currentDate: new Date(),
      // 区划 区码
      cascaderValue: '',
      // 产地选项
      places: [],
      subjectTypeList: [
        {
          text: '市场内固定档口',
          id: 'FixedPlace'
        },
        {
          text: '市场内临时经营区',
          id: 'TemporaryOperatingArea'
        },
        {
          text: '市场外固定经营者',
          id: 'OtherSellersOfEdibleAgricultural'
        }
      ],
      subjectNatureList: [
        {
          text: '企业',
          id: 'enterprise'
        },
        {
          text: '个人',
          id: 'personal'
        }
      ],
      manageStateList: [
        {
          text: '在营',
          id: 'effective'
        },
        {
          text: '非在营',
          id: 'nonEffective'
        }
      ],
      // 经营者类型
      subSubjectTypeList: [
        {
          text: '餐馆',
          id: 'Restaurant'
        },
        {
          text: '集体用餐配送单位',
          id: 'DeliveryUnitOfGroupMeal'
        },
        {
          text: '中央厨房',
          id: 'CentralKitchen'
        },
        {
          text: '学校食堂',
          id: 'SchoolCanteen'
        },
        {
          text: '托幼机构食堂',
          id: 'KindergartenCanteen'
        },
        {
          text: '便利店',
          id: 'MiniMart'
        },
        {
          text: '食杂店',
          id: 'GroceryStore'
        },
        {
          text: '商场超市',
          id: 'Supermarket'
        },
        {
          text: '食用农产品专卖店',
          id: 'AgriculturalProductStore'
        },
        {
          text: '其他',
          id: 'Other'
        }
      ],
      params: {
        subjectType: 'FixedPlace', // 主体类型
        subjectTypeName: '市场内固定档口', // 主体类型
        name: '', // 供应商名称
        uscId: '', // 否 营业执照号
        type: 'fastCheckProduct', // 往来单位类型，默认是fastCheckProduct
        areaCode: '', // 行政区划
        areaName: '', // 行政区划
        address: '', // 详细地址
        manageState: 'effective', // 否 经营状态 effective(“正常”),nonEffective(“禁用”)
        manageStateText: '', // 经营状态
        subSubjectType: '', // 经营者类型
        subSubjectTypeText: '', // 经营者类型
        subjectNatureText: '',
        subjectNature: '', // 主体性质 enterprise(“企业”),personal(“个人”)
        managementEntName: '', // 否 所属市场名称
        managementEntId: '', // 所属市场id，当往来单位类型是市场内临时经营区或市场周边临时经
        legalPerson: '', // 否 负责人名称或法定人
        legalPersonTel: '', // 否 负责人联系方式
        contacts: '', // 联系人
        contactsTel: '', // 联系人联系方式
        varieties: '', // 经营项目 手动输入
        varietyTypeIds: '', // 经营范围数组，如：
        varietyTypeIdsText: '',
        enterprisePremisesJson: '', // 否 经营地址
        auditStatus: '', // 审核状态
        objectId: '',
        home: '', // 住所
        description: '', // 备注
        certificatePicInfoJson: '',
        licenseNumber: '', // 品经营许可证/仅销售预包装食品备案
        foundationDate: '', // 销售者入场日期
        certificatePicInfo: [
          {
            fileId: '',
            fileName: '',
            type: 'LicenseOrCode' // 营业执照照片
          },
          {
            fileId: '',
            fileName: '',
            type: 'BusinessLicense' // 食品经营许可证照片
          },
          {
            fileId: '',
            fileName: '',
            type: 'KeepRecord' // 备案凭证
          },
          {
            fileId: '',
            fileName: '',
            type: 'IdCard' // 身份证照片
          }
        ],
        relationPlace: [],
        relationPlaceJson: '',
        hasEntryRecord: '', // 是否建立入场销售者档案
        hasEntryRecordText: '' // 是否建立入场销售者档案
      },
      typeOfAddSubject: '1', // 新增主体方式 默认：选择已建档主体
      result: [],
      businessScopeList: [],
      businessScopeTextList: [],
      activeIds: [],
      activeIndex: 0
    }
  },
  beforeRouteLeave(to, from, next) {
    // 返回快检主体 清除缓存
    if (to.name === 'inspectionSubject') {
      mutations.setSubjectInfo({})
      mutations.setMarketInfo({})
      delKeepaliveCache(this)
      console.log('销毁', to.name)
    }
    next()
  },
  created() {
    console.log('created')
    this.getBusinessScope()
  },
  activated() {
    console.log('activated')
    // 获取-主体名称
    if (JSON.stringify(store.subjectInfo) !== '{}') {
      let info = store.subjectInfo
      this.params = { ...this.params, ...info }
    }
    // 获取-所属市场
    if (JSON.stringify(store.marketInfo) !== '{}') {
      let info = store.marketInfo
      this.params.managementEntName = info.managementEntName
      this.params.managementEntId = info.managementEntId
    }
  },
  methods: {
    // 重置经营范围
    resetBusinessScope() {
      this.activeIds = []
      this.activeIndex = 0
      this.params.varietyTypeIdsText = ''
      this.params.varietyTypeIds = ''
      this.show = false
    },
    // 确认经营范围
    confirmBusinessScope() {
      let newList = this.businessScopeTextList
      let str = newList.join(',')
      this.params.varietyTypeIdsText = str
      let idList = this.activeIds
      let idStr = idList.join(',')
      this.params.varietyTypeIds = idStr
      this.show = false
    },
    getBusinessScopeText(e) {
      let exist = this.businessScopeTextList.indexOf(e.text)
      console.log('exist', exist)
      if (exist === -1) {
        this.businessScopeTextList.push(e.text)
      }
    },
    // 获取经营范围
    async getBusinessScope() {
      const { code, data } = await getBusinessScope()
      if (code === '0') {
        data.forEach((item) => {
          this.businessScopeList.push({
            text: item.name,
            id: item.id,
            children: item.childList.map((child) => {
              return {
                text: child.name,
                id: child.id
              }
            })
          })
        })
      }
      // console.log(this.businessScopeList)
    },
    // 选择已建档主体 or 临时建档
    selectFilingSubject(e) {
      this.params = this.$options.data().params
      this.params.subjectType = 'TemporaryOperatingArea'
      this.params.subjectTypeName = '市场内临时经营区'
      this.typeOfAddSubject = e
      console.log(e)
      console.log(this.typeOfAddSubject)
      if (e === '1') this.params.auditStatus = 'waitMarketAudit'
    },
    // 校验
    validate() {
      let requiredList = []
      // 市场内固定档口
      if (this.params.subjectType === 'FixedPlace') {
        // 必填项-基本信息
        requiredList = [
          {
            label: '主体名称',
            key: 'name'
          }
        ]
      } else if (this.params.subjectType === 'TemporaryOperatingArea') {
        if (this.typeOfAddSubject === '1') {
          // 必填项-基本信息
          requiredList = [
            {
              label: '主体名称',
              key: 'name'
            }
          ]
        } else {
          requiredList = [
            {
              label: '主体名称',
              key: 'name'
            },
            {
              label: '营业执照/统一社会信用代码/身份证',
              key: 'uscId'
            },
            {
              label: '所属区划',
              key: 'areaName'
            },
            {
              label: '所属市场',
              key: 'managementEntName'
            },
            {
              label: '经营状态',
              key: 'manageStateText'
            },
            {
              label: '主体性质',
              key: 'subjectNatureText'
            },
            {
              label: '负责人姓名',
              key: 'legalPerson'
            },
            {
              label: '联系人姓名',
              key: 'contacts'
            },
            {
              label: '联系方式',
              key: 'contactsTel'
            },
            {
              label: '经营范围',
              key: 'varietyTypeIdsText'
            },
            {
              label: '是否建立入场销售者档案',
              key: 'hasEntryRecordText'
            },
            {
              label: '销售者入场日期',
              key: 'foundationDate'
            }
          ]
        }
      } else if (
        this.params.subjectType === 'OtherSellersOfEdibleAgricultural'
      ) {
        requiredList = [
          {
            label: '主体名称',
            key: 'name'
          },
          {
            label: '营业执照/统一社会信用代码/身份证',
            key: 'uscId'
          },
          {
            label: '经营地址',
            key: 'areaName'
          },
          {
            label: '经营详细地址',
            key: 'address'
          },
          {
            label: '经营类型',
            key: 'subSubjectTypeText'
          },
          {
            label: '主体性质',
            key: 'subjectNatureText'
          },
          {
            label: '联系人姓名',
            key: 'contacts'
          },
          {
            label: '联系方式',
            key: 'contactsTel'
          },
          {
            label: '经营项目',
            key: 'varieties'
          }
        ]
        console.log('市场外固定经营者')
      }

      try {
        console.log(requiredList)
        requiredList.forEach((item) => {
          let value = this.params[item.key] + ''.trim()
          if (value === '') {
            throw new Error(`${item.label} 为必填项！`)
          }
        })

        // 正则校验
        if (!validateIdCardAndUscId(this.params.uscId)) {
          throw new Error(`校验营业执照/统一社会信用代码/身份证 格式不正确！`)
        }
        if (!validateContactsTel(this.params.contactsTel)) {
          throw new Error(`联系方式 格式不正确！`)
        }

        return true
      } catch (e) {
        this.$toast(e.message)
      }
    },
    // 提交
    submit() {
      // 验证各字段是否为空
      if (!this.validate()) return false
      this.postParams()
    },
    async postParams() {
      this.params.certificatePicInfoJson = JSON.stringify(
        this.params.certificatePicInfo
      )
      this.params.relationPlaceJson = JSON.stringify(this.params.relationPlace)

      const { code } = await saveInspectSubject(this.params)
      if (code === '0') {
        this.$toast.success('新增成功')
        delKeepaliveCache(this)
        this.$router.go(-1)
      }
    },
    async toSelect(e) {
      this.active = e
      this.show = true
      // 选择主体类型
      if (e === 9) {
        const { code, data } = await getAreaList({ parentAreaCode: 'CHN' })
        if (code === '0') {
          this.places = []
          data.forEach((item) => {
            this.places.push({
              text: item.areaName,
              value: item.areaCode,
              children: []
            })
          })
        }
      }
    },
    // 确定-销售者入场日期
    submitTime() {
      this.params.foundationDate = ParseDate(this.currentDate)
      this.show = false
    },
    // 选择-主体类型
    confirmSubjectType() {
      this.params = this.$options.data().params
      let value = this.$refs.picker1.getValues()[0]
      this.params.subjectType = value.id
      this.params.subjectTypeName = value.text
      this.show = false
      let path = this.$route.path
      this.$router.replace(path)
    },
    // 选择-经营者类型
    confirmSubSubjectType() {
      let value = this.$refs.picker2.getValues()[0]
      this.params.subSubjectType = value.id
      this.params.subSubjectTypeText = value.text
      this.show = false
    },
    // 选择-经营状态
    confirmManageState() {
      let value = this.$refs.picker3.getValues()[0]
      this.params.manageState = value.id
      this.params.manageStateText = value.text
      this.show = false
    },
    // 选择-主体性质
    confirmSubjectNatureList() {
      let value = this.$refs.picker4.getValues()[0]
      this.params.subjectNature = value.id
      this.params.subjectNatureText = value.text
      this.show = false
    },
    // 选择-主体性质
    confirmEnterprisePremises() {
      let value = this.$refs.pickerOfEnterprisePremises.getValues()[0]
      this.params.hasEntryRecord = value.id
      this.params.hasEntryRecordText = value.text
      this.show = false
    },
    // 上传
    uploadFile(e, index) {
      console.log(e, index)
      this.params.certificatePicInfo.forEach((item) => {
        if (item.type === index) {
          item.fileId = e[0].fileId
          item.fileName = e[0].fileName
        }
      })
    },
    // 检测区划改变
    async onChange({ value, selectedOptions, tabIndex }) {
      const { code, data } = await getAreaList({
        parentAreaCode: value
      })
      let placeIndex = ''
      let target = {}

      if (tabIndex > 0) {
        for (let i = 0; i <= tabIndex; i++) {
          if (selectedOptions[i].parentIndex !== undefined) {
            let parentIndex = selectedOptions[i].parentIndex
            console.log('parentIndex:', parentIndex)
            target = this.places[parentIndex].children
          }
        }
        placeIndex = target.findIndex((item) => item.value === value)
        target = target[placeIndex]
      } else {
        placeIndex = this.places.findIndex((item) => item.value === value)
        target = this.places[placeIndex]
      }

      if (code === '0') {
        data.forEach((item) => {
          if (tabIndex < 1) {
            target.children.push({
              text: item.areaName,
              value: item.areaCode,
              children: [],
              parentIndex: placeIndex
            })
          } else {
            target.children.push({
              text: item.areaName,
              value: item.areaCode,
              parentIndex: placeIndex
            })
          }
        })
      }
    },
    // 区划完成
    onFinish({ selectedOptions }) {
      this.params.areaName =
        selectedOptions.map((option) => option.text).join('') || ''
      // 获取区划码
      this.params.areaCode = selectedOptions[selectedOptions.length - 1].value
      console.log('finish')
      this.show = false
    }
  }
}
</script>

<style scoped lang="scss">
.popup_input {
  &_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    .cancel {
      font-size: 14px;
      color: #b2b8bd;
    }
    .title {
      font-size: 16px;
      /* 文字/常规黑(描述类文字) */
      color: #171819;
    }
    .confirm {
      font-size: 14px;
      color: #2163e0;
    }
  }
}
.business_scope {
  font-family: PingFangSCBold-Bold;
  padding: 10px 15px;

  &_top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: normal;
      line-height: 22px;
      letter-spacing: 0em;
      /* 文字/常规黑(描述类文字) */
      color: #171819;
    }

    .all_select {
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0em;
      /* 主色/营商篮(品牌色) */
      color: #2163e0;
    }
  }

  .range_item {
    height: 36px;
    margin-top: 10px;
  }
}
</style>
